<!--
 * @author: Alagon
 * @Date: 2021-07-02 10:09 AM
 * @license: MIT
 * @LastEditors: Alagon
 * @LastEditTime: 2021-07-03 14:14 PM
 * @Description: 
-->
<template>
  <div class="detail-contaner">
    <Publicnav class="punav" />
    <div class="det-wrap">
      <div class="det-left"><Detcontent :data="data" :id="id" :quserid="quserid"/></div>
      <div class="det-right">
        <Relate />
        <Hotarticle />
      </div>
    </div>
  </div>
</template>
<script>
import Publicnav from "@/components/PublicNav";
import Detcontent from "@/components/Indpage/Detail/Detcontent";
import Relate from "@/components/Unloginrside/Detailrside/Relatedation";
import Hotarticle from "@/components/Unloginrside/Detailrside/Hotarticle";
export default {
  components: {
    Publicnav,
    Detcontent,
    Relate,
    Hotarticle,
  },
  data() {
    return {
      data: {},
      id: "",
      quserid:"",
    };
  },
  mounted() {
    this.data = this.$route.query.da;
    this.id = this.$route.query.id;
    this.quserid = this.$route.query.quserid;
    console.log(this.id);
  },
};
</script>
<style lang="scss" scoped>
.detail-contaner {
  .punav {
    position: fixed;
    z-index: 10000;
  }
  background-color: #f4f5f5;
  position: relative;
  .det-wrap {
    width: 960px;
    @include flex(space-between, none);
    margin: auto;
    padding-top: 80px;
    padding-bottom: 20px;
    .det-right {
      width: 300px;
      position: sticky;
      top: 0;
    }
  }
}
@media screen and(max-width: 960px) {
  .det-right {
    display: none;
  }
}
</style>